<template>
  <div class="box">
    <h1>About</h1>
    <div>
      <el-button type="primary" @click="addCounter">Test</el-button>
    </div>
    <div>{{ store.count }} : {{ count }}</div>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import { reactive } from "vue";
import { storeToRefs } from "pinia";
import { useCounterStore } from "@/stores/counter";

const store = useCounterStore();

let { count } = storeToRefs(store);
let age = ref(66);
let counter = reactive({
  name: "demo",
});

onMounted(() => {
  console.log("onMounted");
});

function addCounter() {
  store.increment();
  console.log("addCounter", store.count);
  console.log("age", age.value);
  console.log("counter", counter.name);
}
</script>

<style scoped></style>
